<template>
  <view class="bind-mp-container">
    <!-- 返回导航栏 -->
    <back :showBackText="false" customClass="bg-gradual-blue text-white" title="绑定公众号"></back>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 页面头部说明 -->
      <view class="header-section">
        <view class="icon-wrapper">
          <text class="cuIcon-weixin text-white" style="font-size: 60rpx;"></text>
        </view>
        <text class="title">绑定微信公众号</text>
        <text class="subtitle">获取更多精彩内容和服务</text>
      </view>

      <!-- 绑定表单区域 -->
      <view class="form-section">
        <view class="form-card">
          <view class="form-item">
            <text class="label">验证码</text>
            <input 
              class="input-field"
              type="text" 
              maxlength="32"
              placeholder="请输入公众号验证码"
              placeholder-class="placeholder-style"
              :value="verifyCode"
              :disabled="user.mp_openid"
              @input="onInputVerifyCode"
            />
          </view>

          <button 
            class="submit-btn"
            :class="{'disabled': !verifyCode.trim() || user.mp_openid}"
            :disabled="!verifyCode.trim() || user.mp_openid"
            @tap="handleBind"
          >
            <text>{{ user.mp_openid ? '已绑定' : '立即绑定' }}</text>
          </button>
        </view>
      </view>

      <!-- 操作指南 -->
      <view class="guide-section">
        <view class="guide-header">
          <text class="guide-title">绑定指南</text>
          <button class="qrcode-btn" @tap="showQRCode">
            <text class="cuIcon-qr_code text-blue" style="font-size: 28rpx; margin-right: 8rpx;"></text>
            关注公众号
          </button>
        </view>

        <view class="guide-list">
          <view class="guide-item" v-for="(item, index) in guideSteps" :key="index">
            <view class="step-number">{{ index + 1 }}</view>
            <text class="step-text">{{ item }}</text>
          </view>
        </view>
      </view>
    </view>

    

    <!-- 二维码弹窗 -->
    <view v-if="showQRModal" class="modal-overlay" @tap="closeQRModal">
      <view class="qr-modal" @tap.stop>
        <view class="qr-header">
          <text class="qr-title">长按二维码识别关注</text>
          <text class="close-btn" @tap="closeQRModal">×</text>
        </view>
        <image 
          class="qr-image" show-menu-by-longpress="true"
          :src="pageSetData && pageSetData.mp_qrcode_url ? pageSetData.mp_qrcode_url : ''"
          mode="aspectFit"
          @error="onQRError"
        ></image>

      </view>
    </view>
  </view>
</template>
<script>
import { get, post } from "@/common/js/http.js";

export default {
  data() {
    return {
      configType: 'bind_mp_page_set',
      pageSetData: null,
      verifyCode: '',
      user: {},
      showQRModal: false,
      guideSteps: []
    };
  },

  onLoad() {
    this.initData();
  },

  onShow() {
    this.loadUserInfo();
  },

  methods: {
    /**
     * 初始化页面数据
     */
    async initData() {
      try {
        const app = getApp();
        const service = app.globalData.service;
        this.pageSetData = await service.getConfig(this.configType);
        
        // 从pageSetData中获取绑定指南规则
        if (this.pageSetData && this.pageSetData.rule && Array.isArray(this.pageSetData.rule)) {
          this.guideSteps = this.pageSetData.rule;
        } else {
          // 如果没有配置，使用默认值
          this.guideSteps = [
            '关注微信公众号',
            '在公众号菜单中找到"绑定账号"',
            '获取绑定验证码',
            '输入验证码完成绑定'
          ];
        }
      } catch (error) {
        console.error('获取页面配置失败:', error);
      }
    },

    /**
     * 加载用户信息
     */
    loadUserInfo() {
      const app = getApp();
      const cache = app.globalData.config.storage;
      const userInfo = cache.getUserInfoData() || {};
      this.user = userInfo;
      this.verifyCode = userInfo.mp_openid || '';
    },

    /**
     * 输入验证码
     */
    onInputVerifyCode(e) {
      this.verifyCode = e.detail.value;
    },

    /**
     * 处理绑定操作
     */
    async handleBind() {
      if (!this.verifyCode.trim()) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        });
        return;
      }

      if (this.user.mp_openid) {
        uni.showToast({
          title: '已绑定公众号',
          icon: 'none'
        });
        return;
      }

      try {
        uni.showLoading({ title: '绑定中...' });
        
        await post('user/bindMp', {
          code: this.verifyCode.trim()
        });

        uni.showToast({
          title: '绑定成功',
          icon: 'success'
        });

        // 更新用户信息
        this.loadUserInfo();

        setTimeout(() => {
          uni.navigateBack({ delta: 1 });
        }, 1500);
      } catch (error) {
        console.error('绑定失败:', error);
        uni.showToast({
          title: error.message || '绑定失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    /**
     * 显示公众号二维码
     */
    showQRCode() {
      if (!this.pageSetData || !this.pageSetData.mp_qrcode_url) {
        uni.showToast({
          title: '二维码加载失败',
          icon: 'none'
        });
        return;
      }
      this.showQRModal = true;
    },

    /**
     * 关闭二维码弹窗
     */
    closeQRModal() {
      this.showQRModal = false;
    },

    /**
     * 二维码加载失败
     */
    onQRError() {
      uni.showToast({
        title: '二维码加载失败',
        icon: 'none'
      });
    }
  }
};
</script>
<style scoped>
.bind-mp-container {
  min-height: 100vh;
  background: #f2f2f7; /* iOS风格背景色 */
  padding-bottom: 120rpx;
}

/* 主要内容区域 */
.main-content {
  padding: 20rpx 20rpx;
}

/* 页面头部 */
.header-section {
  text-align: center;
  margin-bottom: 40rpx;
  padding-top: 40rpx;
}

.icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  background: rgba(0, 122, 255, 0.1); /* iOS蓝色背景 */
  border-radius: 24rpx; /* 圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20rpx;
}

.title {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: #000; /* iOS黑色文字 */
  margin-bottom: 12rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #8e8e93; /* iOS灰色文字 */
}

/* 表单区域 */
.form-section {
  margin-bottom: 30rpx;
}

.form-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); /* 更轻的阴影 */
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #000; /* iOS黑色文字 */
  margin-bottom: 16rpx;
}

.input-field {
  width: 100%;
  height: 80rpx;
  background: #f2f2f7; /* iOS输入框背景色 */
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 30rpx;
  color: #000; /* iOS黑色文字 */
  border: 2rpx solid transparent;
}

.input-field:focus {
  border-color: #007AFF; /* iOS蓝色边框 */
  background: #fff;
}

.input-field.disabled {
  background: #f0f0f0;
  color: #999;
}

.placeholder-style {
  color: #8e8e93; /* iOS灰色占位符 */
  font-size: 30rpx;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background: #007AFF; /* iOS蓝色按钮 */
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
  border: none;
}

.submit-btn:active {
  transform: translateY(2rpx);
  opacity: 0.8; /* 按下时的透明度 */
}

.submit-btn.disabled {
  background: #ccc !important;
  color: #999;
  transform: none;
  opacity: 1;
}

/* 操作指南 */
.guide-section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); /* 更轻的阴影 */
}

.guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.guide-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #000; /* iOS黑色文字 */
}

.qrcode-btn {
    display: flex;
    align-items: center;
    padding: 6rpx 16rpx; /* 减小内边距 */
    background: #ffffff;
    border-radius: 20rpx; /* 稍微减小圆角 */
    font-size: 24rpx; /* 稍微减小字体 */
    color: #007AFF;
    border: 2rpx solid #007AFF;
    box-shadow: none;
    transition: all 0.3s ease;
    font-weight: 500;
  }

  .qrcode-btn:active {
    transform: translateY(1rpx);
    background: #f0f0f0;
    box-shadow: none;
  }

  .qrcode-btn .icon-qrcode {
    font-size: 24rpx; /* 调整图标大小 */
    margin-right: 8rpx; /* 调整图标右边距 */
    color: #007AFF;
  }

.guide-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.step-number {
  width: 36rpx;
  height: 36rpx;
  background: #007AFF; /* iOS蓝色背景 */
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 600;
  color: #fff;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.step-text {
  font-size: 28rpx;
  color: #000; /* iOS黑色文字 */
  line-height: 1.5;
}

/* 底部广告 */
.footer-section {
  margin-top: 30rpx;
  padding: 0 20rpx;
}

/* 二维码弹窗样式保持不变 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.qr-modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
}

.qr-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 2rpx solid #eee;
}

.qr-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 40rpx;
  color: #999;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-image {
  width: 400rpx;
  height: 400rpx;
  margin: 40rpx auto;
  display: block;
}


</style>